<!doctype html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>雨林大象</title>
	<!-- <link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/default.css"> -->
	<link rel="stylesheet" type="text/css" href="css/ele.css">
</head>

<body>
	<div class="preload">
		<img class="airplane" src="./images/飞机.png" alt="">
		<h3>林子站</h3>
		<img class="cloud1" src="./images/cloud.png" alt="cloud1">
		<img class="cloud2" src="./images/cloud.png" alt="cloud2">
		<img class="cloud3" src="./images/cloud.png" alt="cloud3">
	</div>
	<article class="htmleaf-container">
		<div class="ele-container">
			<div class="ele-wrapper">
				<div class="ele-tail"></div>
				<div class="ele-body">
					<div class="ele-head">
						<div class="ele-eyebrows"></div>
						<div class="ele-eyes"></div>
						<div class="ele-mouth"></div>
						<div class="ele-fang-front"></div>
						<div class="ele-fang-back"></div>
						<div class="ele-ear"></div>
					</div>
				</div>
				<div class="ele-leg-1 ele-leg-back">
					<div class="ele-foot"></div>
				</div>
				<div class="ele-leg-2 ele-leg-front">
					<div class="ele-foot"></div>
				</div>
				<div class="ele-leg-3 ele-leg-back">
					<div class="ele-foot"></div>
				</div>
				<div class="ele-leg-4 ele-leg-front">
					<div class="ele-foot"></div>
				</div>
			</div>
		</div>
		<div class="text">
			<h1 style="font-weight: 600;">
				<span>想</span>
				<span>和</span>
				<span>你</span>
				<span>去</span>
				<span>热</span>
				<span>带</span>
				<span>雨</span>
				<span>林</span>
				<span>和</span>
				<span>竹</span>
				<span>林</span>
				<span>,</span>
				<span>看</span>
				<span>大</span>
				<span>象</span>

			</h1>
		</div>
	</article>
	<div id="runner" ></div>
		<script>
			var text = document.querySelector('.text')
			var eles = document.querySelector('.ele-wrapper')
			var panda = document.querySelector('#runner')
			setTimeout(function () {
				text.style.display = 'none'
			}, 10000)
			setInterval(function () {
				eles.style.display = 'block'
			}, 2000)
			setInterval(function () {
				panda.style.display = 'block'
			}, 3000)

			window.addEventListener("load", () => {
				const preload = document.querySelector(".preload");
				preload.classList.add("preload-finish")
			})
		</script>
	
	
</body>

</html>